<template>
    <div>
   <div class="header">
       <ul class="nav">
           <li v-for="item in list" :key="item.name" @click="name = item.name" :class="item.name == name ? 'active' :''">
               {{item.name}}
           </li>
       </ul>
   </div>
   <div class="shop">
     
       <i class="dingdan">订单号：2019090112456</i>
       <i  class="dingdan1" @click="godet">拼团中 ></i>
       <div class="left">
       <img src="https://img.wxcha.com/m00/99/7a/3cb6fa656a4cfcb3406f12ee68efa8e2.jpg?down" alt="">
       </div>
       <div class="right">
            <p>黄色连衣裙，纯棉设计，洋气大方，韩版流行休闲网纱....</p>
            <span>￥100.0</span><br/>
            <div class="button">邀 请</div>
       </div>
   </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                name:"全 部",
                list:[
                    {
                        name:"全 部"
                    },
                       {
                        name:"拼团中"
                    },
                       {
                        name:"已成功"
                    },
                       {
                        name:"已失效"
                    },
                   
                ]
            }
        },
        methods:{
            godet(){
                this.$router.push("/coldetail")
            },
            me() {
        this.$router.push("/mine");
        },
        }
    }
</script>

<style scoped>

.dingdan1{
     position: absolute;
    font-size: 12px;
    top: -3vh;
    right: 6vw;
    font-style:normal;
}
.dingdan{
    position: absolute;
    font-size: 12px;
    top: -3vh;
    left: 0;
}
.button{
    width: 40vw;
    height: 6vh;
    background: #409EFF;
    text-align: center;
    border-radius: 10px;
    line-height: 6vh;
    color: white;
    margin-top:2vh;
}
.shop{
    width: 100vw;
    margin-top: 5vh;
    display: flex;
    justify-content: space-evenly;
    position: relative;
    
}
.right p{
    font-size: 14px;
}
.right {
     height: 14vh;
     width: 50vw;
}
.right span {
    color: red;
    font-size: 14px;
}
.left{
    width: 30vw;
    height: 14vh;
}
.left img {
    width: 100%;
    border-radius: 20px;
}
.active{
    color: #409EFF;
    border-bottom: 2px solid #409EFF;
}

.nav{
    display: flex;
    justify-content: space-evenly;
    color: #413d3d;
}
.nav li {
    /* margin: 1vh; */
    padding: 2vw;
    font-size: 16px;
}

</style>